﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>数据验证集中显示</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    
    <style type="text/css">
    .validGroup
    {
        padding:5px;
        margin:0;   
        color: Red;     
        font-size:12px;
        margin-left:15px;
    }
    .validGroup li
    {
        padding-top:4px;
    }
    .validGroup li a{
        color: #FF0000;
        font-family: Tahoma;
        font-size: 9pt; 
        padding-bottom:2px;
        border-bottom: 1px dashed #FF7700;
        text-decoration: none;       
    }
    .validGroup li a:hover
    {
        color:#ff7700;
    }
    ul.validGroup
    {
        list-style: disc;
    }
    ol.validGroup
    {
        list-style: decimal;
    }
    </style>
</head>
<body>
    <h1>数据验证集中显示</h1>      
        
    <ul id="validGroup1" class="validGroup"> 
    </ul>

    <div id="form1">
        <table>
            <tr>
                <td>
                    <label for="username$text">帐号：</label>
                </td>
                <td>
                    <input id="username" name="username" errorMode="none" onvalidation="onUserNameValidation" vtype="email" class="mini-textbox" required="true" requiredErrorText="帐号不能为空"/>                    
                </td>    
            </tr>
            <tr>
                <td>                   
                    <label for="pwd$text">密码：</label>
                </td>
                <td>
                    <input id="pwd" name="pwd" errorMode="none" onvalidation="onPwdValidation" class="mini-password" required="true" vtype="minLength:5" minLengthErrorText="密码不能少于5个字符" />                    
                </td>
            </tr>            
            <tr>
                <td>
                    
                </td>
                <td>
                    <input value="Login" type="button" onclick="submitForm()" />
                </td>
            </tr>
        </table>
    </div>

    
    <script type="text/javascript">
        mini.parse();

        function submitForm() {           
            var form = new mini.Form("#form1");
            form.validate();

            if (form.isValid() == false) return;

            //提交数据
            var data = form.getData();
            var json = mini.encode(data);
            $.ajax({
                url: "../data/FormService.jsp?method=SaveData",
                type: "post",
                data: { submitData: json },
                success: function (text) {
                    alert("提交成功，返回结果:" + text);
                }
            });
        }

        //////////////////////////////////////
        function updateError(e) {
            var control = e.sender;
            removeError(control);
            if (e.isValid == false) {                            
                addError(control, e.errorText);
            }
        }
        function focusInput(id) {
            var el = document.getElementById(id);
            if (el) el.focus();
        }
        function addError(control, errorText) {
            var textId = control.id + "$text";
            var errorId = control.uid + "$errorText";
            
            removeError(control);
            var jq = jQuery("#validGroup1");
            jq.append('<li id="' + errorId + '"><a href="javascript:focusInput(\''+textId+'\')">' + errorText + '</a></li>');
        }
        function removeError(control) {
            var errorId = control.uid + "$errorText";
            var el = document.getElementById(errorId);
            jQuery(el).remove();
        }

        //////////////////////////////////////////

        function onUserNameValidation(e) {     
            updateError(e);
        }
        function onPwdValidation(e) {
            updateError(e);
        }
    </script>

    <div class="description">
        <h3>Description</h3>
        <p>设置表单控件"errorMode=none"，验证失败时，控件将不显示任何错误提示。
        </p>
        <p>在"onvalidation"事件处理函数中，调用updateError方法，将不同控件的错误信息集中在一个DOM元素内显示。</p>
    </div>
</body>
</html>